iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 24
0

照片和相簿的佈局其實很類似,差別只在 item 的外觀、間距、以及相簿文字而已,所以我們可以改造 Gallery component 讓它能吃二種設定。

App.js

import React from 'react';
import { AppBar, Layout } from 'react-toolbox';
import Gallery from './Gallery';
import Style from './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.data = props.data;
  }
  render() {
    return (
      <Layout>
        <AppBar />
        <div className={Style.content}>
          <Gallery items={this.data} type="album" />
        </div>
      </Layout>
    );
  }
}

export default App;

Gallery.js

import React from 'react';
import Style from './App.css';

class Gallery extends React.Component {
  constructor(props) {
    super(props);
    this.type = props.type === 'album' ? '相簿' : '照片';
  }
  render() {
    const el = this.props.items.map(item => (
      <li key={item.id} className={Style.item}>
        <a href="#" style={{ backgroundImage: `url(${item.cover_photo.urls.thumb})` }}>
          {item.title}
        </a>
      </li>));
    return (
      <div className={Style.gallery}>
        <div>{this.type}</div>
        <ul className={Style['list-group']}>{el}</ul>;
      </div>
    );
  }
}

export default Gallery;

上一篇
Gallery
下一篇
Navigation
系列文
如何在前端開發流程中加入使用者經驗設計 - 以線上相簿為例30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言